<datatable-demos></datatable-demos>

<div class="content-section introduction">
    <div>
        <span class="feature-title">DataTable - <span class="subitem">Selection</span></span>
        <span>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the selection property 
            and onRowSelect-onRowUnselect events are provided as optional callbacks. In addition built-in radio button and checkbox based selections 
            are available as alternatives.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-growl [value]="msgs"></p-growl>

    <h3 class="first">Single</h3>
    <p>In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.</p>
    <p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar1" dataKey="vin">
        <p-header>Single Selection</p-header>
        <p-footer><div style="text-align: left">Selected Car: {{selectedCar1 ? selectedCar1.vin + ' - ' + selectedCar1.brand + ' - ' + selectedCar1.year + ' - ' + selectedCar1.color: 'none'}}</div></p-footer>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
    </p-dataTable>

    <h3>Multiple</h3>
    <p>In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices
    metakey or shiftkey are required.</p>
    <p-dataTable [value]="cars" selectionMode="multiple" [(selection)]="selectedCars1" dataKey="vin">
        <p-header>Multiple Selection</p-header>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
        <p-footer>
            <ul>
                <li *ngFor="let car of selectedCars1" style="text-align: left">{{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}</li>
            </ul>
        </p-footer>
    </p-dataTable>

    <h3>Events</h3>
    <p>DataTable provides onRowSelect and onRowUnselect as optional callbacks.</p>
    <p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar2" (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)" dataKey="vin">
        <p-header>Selection with Events</p-header>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
    </p-dataTable>
    
    <h3>RadioButton</h3>
    <p>Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".</p>
    <p-dataTable [value]="cars" [(selection)]="selectedCar3" dataKey="vin">
        <p-header>Single Selection</p-header>
        <p-footer><div style="text-align: left">Selected Car: {{selectedCar3 ? selectedCar3.vin + ' - ' + selectedCar3.brand + ' - ' + selectedCar3.year + ' - ' + selectedCar3.color: 'none'}}</div></p-footer>
        <p-column [style]="&#123;'width':'38px'&#125;" selectionMode="single"></p-column>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
    </p-dataTable>
    
    <h3>Checkbox</h3>
    <p>Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".</p>
    <p-dataTable [value]="cars" [(selection)]="selectedCars2" dataKey="vin">
        <p-header>Checkbox Selection</p-header>
        <p-column [style]="&#123;'width':'38px'&#125;" selectionMode="multiple"></p-column>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
        <p-footer>
            <ul>
                <li *ngFor="let car of selectedCars2" style="text-align: left">{{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}</li>
            </ul>
        </p-footer>
    </p-dataTable>

    <h3>Checkbox with Paging</h3>
    <p>
        When using checkboxes for multiple selection with paging and clicking the header checkbox, by default, items on 
        all other pages will be deselected and only the current page's items will be toggled. Often, the more desired 
        approach is to toggle all items across all pages. This can be accomplished by setting the 
        "headerCheckboxToggleAllPages" property to "true" on your paged DataTable. Notice how the header checkbox only 
        stays checked when all items across all pages are selected. 
    </p>
    <p-dataTable [value]="cars" [(selection)]="selectedCars3" dataKey="vin" [paginator]="true" [rows]="5" [headerCheckboxToggleAllPages]="true">
        <p-header>Checkbox Multiple Selection with Paging</p-header>
        <p-column [style]="&#123;'width':'38px'&#125;" selectionMode="multiple"></p-column>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
        <p-footer>
            <ul>
                <li *ngFor="let car of selectedCars3" style="text-align: left">{{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}</li>
            </ul>
        </p-footer>
    </p-dataTable>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="datatableselectiondemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatableselectiondemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class DataTableSelectionDemo implements OnInit &#123;

    msgs: Message[];

    cars: Car[];

    selectedCar1: Car;

    selectedCar2: Car;
    
    selectedCar3: Car;

    selectedCars1: Car[];
    
    selectedCars2: Car[];
    
    selectedCars3: Car[];

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    &#125;

    onRowSelect(event) &#123;
        this.msgs = [];
        this.msgs.push(&#123;severity: 'info', summary: 'Car Selected', detail: event.data.vin + ' - ' + event.data.brand&#125;);
    &#125;

    onRowUnselect(event) &#123;
        this.msgs = [];
        this.msgs.push(&#123;severity: 'info', summary: 'Car Unselected', detail: event.data.vin + ' - ' + event.data.brand&#125;);
    &#125;
&#125;
</code>
</pre>            
        </p-tabPanel>

        <p-tabPanel header="datatableselectiondemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatableselectiondemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-growl [value]="msgs"&gt;&lt;/p-growl&gt;

&lt;h3 class="first"&gt;Single&lt;/h3&gt;
&lt;p&gt;In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.&lt;/p&gt;
&lt;p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar1" dataKey="vin"&gt;
    &lt;p-header&gt;Single Selection&lt;/p-header&gt;
    &lt;p-footer&gt;&lt;div style="text-align: left"&gt;Selected Car: {{selectedCar1 ? selectedCar1.vin + ' - ' + selectedCar1.brand + ' - ' + selectedCar1.year + ' - ' + selectedCar1.color: 'none'}}&lt;/div&gt;&lt;/p-footer&gt;
    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;

&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p-dataTable [value]="cars" selectionMode="multiple" [(selection)]="selectedCars" dataKey="vin"&gt;
    &lt;p-header&gt;Multiple Selection&lt;/p-header&gt;
    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
    &lt;p-footer&gt;
        &lt;ul&gt;
            &lt;li *ngFor="let car of selectedCars" style="text-align: left"&gt;{{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/p-footer&gt;
&lt;/p-dataTable&gt;

&lt;h3&gt;Events&lt;/h3&gt;
&lt;p&gt;DataTable provides onRowSelect and onRowUnselect as optional callbacks.&lt;/p&gt;
&lt;p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar2" (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)" dataKey="vin"&gt;
    &lt;p-header&gt;Selection with Events&lt;/p-header&gt;
    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;

&lt;h3&gt;RadioButton&lt;/h3&gt;
&lt;p&gt;Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".&lt;/p&gt;
&lt;p-dataTable [value]="cars" [(selection)]="selectedCar3" dataKey="vin"&gt;
    &lt;p-header&gt;Single Selection&lt;/p-header&gt;
    &lt;p-footer&gt;&lt;div style="text-align: left"&gt;Selected Car: {{selectedCar3 ? selectedCar3.vin + ' - ' + selectedCar3.brand + ' - ' + selectedCar3.year + ' - ' + selectedCar3.color: 'none'}}&lt;/div&gt;&lt;/p-footer&gt;
    &lt;p-column [style]="&#123;'width':'38px'&#125;" selectionMode="single"&gt;&lt;/p-column&gt;
    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;

&lt;h3&gt;Checkbox&lt;/h3&gt;
&lt;p&gt;Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".&lt;/p&gt;
&lt;p-dataTable [value]="cars" [(selection)]="selectedCars2" dataKey="vin"&gt;
    &lt;p-header&gt;Checkbox Selection&lt;/p-header&gt;
    &lt;p-column [style]="&#123;'width':'38px'&#125;" selectionMode="multiple"&gt;&lt;/p-column&gt;
    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
    &lt;p-footer&gt;
        &lt;ul&gt;
            &lt;li *ngFor="let car of selectedCars2" style="text-align: left"&gt;{{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/p-footer&gt;
&lt;/p-dataTable&gt;
    
&lt;h3&gt;Checkbox with Paging&lt;/h3&gt;
&lt;p&gt; 
    When using checkboxes for multiple selection with paging and clicking the header checkbox, by default, items on all 
    other pages will be deselected and only the current page's items will be toggled. Often, the more desired approach
    is to toggle all items across all pages. This can be accomplished by setting the 
    "headerCheckboxToggleAllPages" property to "true" on your paged DataTable. Notice how the header
    checkbox only stays checked when all items across all pages are selected. 
&lt;/p&gt;
&lt;p-dataTable [value]="cars" [(selection)]="selectedCars3" dataKey="vin" [paginator]="true" [rows]="5" [headerCheckboxToggleAllPages]="true"&gt;
    &lt;p-header&gt;Checkbox Multiple Selection with Paging&lt;/p-header&gt;
    &lt;p-column [style]="&#123;'width':'38px'&#125;" selectionMode="multiple"&gt;&lt;/p-column&gt;
    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
    &lt;p-footer&gt;
        &lt;ul&gt;
            &lt;li *ngFor="let car of selectedCars3" style="text-align: left"&gt;{{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/p-footer&gt;
&lt;/p-dataTable&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>
